<template>
 <div class="fixed-header-container">   
  <van-nav-bar
  title="确认订单"
  left-arrow
  @click-left="onClickLeft"
  style="margin-top: 25px;"
  />
 </div>
 
 <div style="margin-top: 65px">
  <van-notice-bar
  left-icon="volume-o"
  mode="closeable"
  text="温馨提示：请确保本次租赁服务是在本人自愿条件下下单，下单人须承担缴纳租金责任以及逾期后所面临的法律诉讼，
        利用平台进行贷款交易是违法行为，若发现以上行为，请联系平台提供线索或报警处理！同时建议您收藏小程序，
        方便后续快速查询订单信息。"
  /> 
  <div class="adress-msg" >
    <van-contact-card type="edit" :tel="tel" :name="name" @click="onEdit" ></van-contact-card>
  </div>
 </div>

 <div >
  <div class="adress-msg">
   <van-row>
    <van-col span="6"><van-image style="width: 1vm;height: 1.5vm;"  src="../assets/1.jpg"/></van-col>
    <van-col span="18" class="product-info">    
    <p>全新realme真我GT Neo6 第三代骁龙8S旗舰芯</p>
    <p>套餐：租完即送 流银骑士 16GB+256GB</p>
    <p>数量：1</p>
    </van-col>
   </van-row>
    <p>预计起租日             预计归还日</p>
    <p>2024.09.10            2025.09.09</p> 
    <div>
      <van-notice-bar
   :scrollable="false"
   text="快递运输期间不算租期，实际起租日为快递签收后第二天"
  />
    </div>
  </div>
  
 </div>

  <div class="adress-msg" >
    <van-cell-group>
    <van-cell title="首期实付租金" value="内容" />
   </van-cell-group>
  <van-cell title="剩余租期" value="内容" />
  <van-cell title="总租金" value="内容" />
  <van-cell title="商家优惠" value="内容" />
  <van-cell title="平台优惠" value="内容" />
  <van-cell title="配送方式" value="内容" />
  <van-cell title="到期买断尾款" value="内容" />
  </div>
  
  <div class="adress-msg" >
    <van-cell-group>
    <van-cell title="冻结押金" value="最高￥3312" />
   </van-cell-group>
  </div>

  <div class="adress-msg" >
    <van-cell-group>
    <van-cell title="商品配件"/>
   </van-cell-group>
   <div class="adress-msg1" >
    <van-cell-group>
    <van-cell title="须归还"/>
    <van-cell title="快充充电适配器" value="￥150" />
    <van-cell title="快充数据线" value="￥100" />
   </van-cell-group>
   <van-cell-group>
    <van-cell title="赠品"/>
    <van-cell title="手机保护套、卡针"/>
   </van-cell-group>
  </div>
  </div>

  <div class="adress-msg2" >
    <van-cell-group>
    <van-cell title="备注"/>
   </van-cell-group>
  </div>

  <div>
   <van-submit-bar  button-text="去免押" @submit="onSubmit">
  <template #tip>  
  <p><van-checkbox v-model="checked"/>我已阅读并同意《租赁服务相关协议》《隐私协议》《数字证书使用协议》</p>
  </template>
</van-submit-bar> 
  </div>
  
</template>

<script setup>
import {ref} from "vue"
import { showToast } from 'vant';


const onClickLeft = () => history.back();
const tel = ref('13000000000');
const name = ref('张三');
const onEdit = () => showToast('edit');
const onSubmit = () => showToast('点击按钮');
</script>

<style scoped>
body {
  background-color: gray;
}
 .fixed-header-container {
    position: fixed;
    height: 65px;
    top: 0;
    left: 0;
    width: 100%;
    background-color: white;
    z-index: 999;
  }
  .adress-msg{
      width: 90vm;
      background-color: #fff;
      border-radius: 8px;
      margin: 12px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      padding: 10px;
    }
    .adress-msg1{
      width: 90vm;
      background-color: gray;
      border-radius: 8px;
      margin: 12px;
      padding: 10px;
    }
    .adress-msg2{
      width: 90vm;
      background-color: #fff;
      border-radius: 8px;
      margin: 12px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      padding: 10px;
      margin-block-end: 150px;
    }
</style>
